<%--
  Created by IntelliJ IDEA.
  User: wesley.wei
  Date: 2018-06-01
  Time: 13:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/componments/layui/css/layui.css">
    <style>
        .grid-demo-bg1 {
            background-color: #63BA79;
        }
        .grid-demo {
            background-color: #63BA78;
        }
    </style>
</head>
<body class="layui-layout-body">
    <!-- 内容主体区域 -->
    <div>
        <div class="layui-elem-quote layui-quote-nm t-body">
           <i class="line"></i>查询条件<em class="flip" id="flip_user"></em>
            <form class="layui-form" action="" id="search_user_form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input name="username" class="layui-input" type="text" id="">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" id="search_user_userName" placeholder="" type="text" name="realName">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">年龄</label>
                        <div class="layui-input-inline">
                            <input name="username" class="layui-input" type="text" id="">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">地址</label>
                        <div class="layui-input-inline">
                            <input name="username" class="layui-input" type="text" id="">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">手机</label>
                        <div class="layui-input-inline">
                            <input name="username" class="layui-input" type="text" id="">
                        </div>
                    </div>

                    <div class="layui-inline" style="float: right; margin-right: 44px; margin-top: 10px">
                        <a class="layui-btn" id="search_user_btn" onclick="">搜索</a>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>

            </form>
        </div>


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>查询结果</legend>
        </fieldset>

        <div class="layui-btn-group">
            <button class="layui-btn" onclick="addUser()">增加</button>
            <button class="layui-btn" onclick="editUser()">编辑</button>
            <button class="layui-btn">删除</button>
        </div>

        <table class="layui-table" lay-data="{url:'/user/list', page:true, id:'userTable'}" lay-filter="test">
            <thead>
            <tr>
                <th lay-data="{checkbox:true, fixed: true}"></th>
                <th lay-data="{field:'id', sort: true}">ID</th>
                <th lay-data="{field:'name'}">用户名</th>
                <th lay-data="{field:'pass',sort: true}">密码</th>
                <th lay-data="{field:'age'}">年龄</th>
                <th lay-data="{field:'address'}">地址</th>
                <th lay-data="{field:'mobile', sort: true}">手机</th>
            </tr>
            </thead>
        </table>
    </div>


<script src="/componments/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    /* layui.use('element', function(){
      var element = layui.element;
    }); */
    var table = undefined;

    layui.use(['element','table'], function(){
        table = layui.table;
    });

    function addUser(){
        layer.open({
            title: '这是添加页面',
            area: ['893px', '600px'],
            type:2,
            content: '/web/user/add',
            yes:function(index, layero){
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        });
    }

    function editUser(){
        var checkStatus = table.checkStatus('userTable');
        data = checkStatus.data;
        if(data == ''){
            layer.alert('请选择数据');
            return false;
        }

        layer.open({
            title: '这是添加页面',
            area: ['893px', '600px'],
            type:2,
            content: '/web/user/add?id='+data[0].id
        });
    }

    function reloadTable(id,url){
        table.reload(id, {
            url: url
        });
    }
</script>
</body>
</html>
